<template>
    <div class="container">
        <!-- 首页轮播图 -->
        <el-carousel height="350px">
            <el-carousel-item v-for="(item,index) in urlList" :key="index">
                <img :src="item" alt="">
            </el-carousel-item>
        </el-carousel>
        <div class="title">
            <h2>好用工具推荐</h2>
        </div>
        <div class="card-util">
            <el-card @click="goUrl(item.gourl)" v-for="(item,index) in cardList" :key="index" style="max-width: 12%" shadow="hover">
                <template #header><img
                :src="item.url"
                style="width: 100%"
                /></template>
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
            </el-card>
        </div>
    </div>
</template>

<script>
import img1 from '@/assets/images/轮播/1.png';
import img2 from '@/assets/images/轮播/2.png';
import img3 from '@/assets/images/轮播/3.png';
import wenxin from '@/assets/images/good-util/文心一言.png';
import ruoyi from '@/assets/images/good-util/若依.png';
import chatgpt from '@/assets/images/good-util/chatGPT.png';
import vuede from '@/assets/images/good-util/vue-de.png';
import RP from '@/assets/images/good-util/RP.png';
import github from '@/assets/images/good-util/github.png';
export default{
    name: 'AdminGoodUtil',
    data(){
        return{
            urlList: [img1,img2,img3],
            cardList:[{
                url: wenxin,
                title: '文心一言',
                description:'文心一言有用、有趣、有温度既能写文案、读文档',
                gourl: 'https://yiyan.baidu.com/welcome',
            },{
                url: ruoyi,
                title: '若依框架',
                description:'使用若依快速构建应用程序的低代码开发',
                gourl: 'https://doc.ruoyi.vip/',
            },{
                url: chatgpt,
                title: 'chatgpt',
                description:'OpenAI开发的人工智能聊天机器人程序',
                gourl: 'https://chatgpt.com/',
            },{
                url: vuede,
                title: 'vue-devtools',
                description:'嵌入在浏览器的开发者工具',
                gourl: 'https://devtools.vuejs.org/',
            },{
                url: RP,
                title: 'acxure RP',
                description:'快速构建页面原型工具',
                gourl: 'https://www.axure.com/',
            },{
                url: github,
                title: 'github',
                description:'代码托管平台，广大编程人的集聚地',
                gourl: 'https://github.com/',
            }]
        }
    },
    methods:{
        goUrl(value){
            console.log(value)
            window.open(value,'_blank');
        }
    }
}
</script>


<style lang="scss" scoped>
.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    .title{
        margin: 0 30px;
        margin-top: 30px;
    }
    .card-util{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        .el-card{
            margin: 30px 30px;
        } 
    }
    .card-util:hover{
        cursor: pointer;
    }
    img{
        width: 100%;
        object-fit: cover; /* This will ensure the image covers the entire container */
        object-position: center; /* This will center the image */
    }
    .el-carousel--horizontal{
        width: 100%;
        border-radius: 20px;
    }
}
</style>